<template>
  <div class="titleborder">
    <div
      class="titlespan"
      :style="titleStyle"
    >
      <span :style="mainTitleStyle">
        {{ borderOptions.bordertitle }}
      </span>
      <span :style="unitStyle">
        {{ borderOptions.borderunit }}
      </span>
    </div>
    <div class="titlecontent" :style="titleContentStyle">
      <slot />
    </div>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'WhiteFullTitleBorder',
  mixins: [defaultmixins],
  props: ['title'],
  data() {
    return {
      backUrl: require('@/assets/linglong/bg_chanliangyuchanpindanhao.png')
    }
  },
  computed: {
    titleStyle() {
      return {
        ...this.borderOptions.titleSpan,
        backgroundImage: `url(${this.backUrl})`,
        height: 72 * this.$root.setting.scale + 'px',
        lineHeight: 72 * this.$root.setting.scale + 'px'
      }
    },
    titleContentStyle() {
      const height = 72 * this.$root.setting.scale
      return {
        ...this.borderOptions.titleContent,
        height: `calc(100% - ${height}px)`
      }
    },
    unitStyle() {
      return {
        color: '#4FC7FF',
        fontSize: 24 * this.$root.setting.scale
      }
    },
    mainTitleStyle() {
      return {
        fontSize: 38 * this.$root.setting.scale + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .titleborder {
    height: 100%;
    width: 100%;
  }

  .titlespan {
    border: 1px dashed #fffdef;
    width: 100%;
    background-size: 100% 100%;
    text-align: center;
  }
  .titlecontent {

  }
  .lbdiv {
  }
</style>
